<template>
  <div class="app" v-loading="false">
    <div class="login">
      <div class="left">
        <p>雪月</p>
        <p>
          <span style="color: #dadada; font-size: 16px">后台管理系统 </span
          ><br /><br />
          <span style="color: #7e9999; font-size: 12px">
            BACKROUND MANACEMENT CENTER</span
          >
        </p>
      </div>

      <div class="right">
        <div><em>SIGN IN</em> &nbsp;<a href="">登录</a></div>
        <div>
          <span><i class="iconfont icon-user"></i> |</span
          ><input
            v-model="user.username"
            placeholder="请输入用户名"
            type="text"
          />
        </div>
        <div>
          <span><i class="iconfont icon-3702mima"></i> |</span
          ><input
            v-model="user.password"
            placeholder="请输入密码"
            type="password"
            @keyup.enter="login"
          />
        </div>
        <div><button @click="login" >登录</button></div>
        <div><input type="checkbox" /> 保持登陆状态</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    async login() {
      let rst = await this.$http.post("login", this.user);
      let { data, meta } = rst;
      if (meta.status == 200) {
        sessionStorage.setItem("token_bd", data.token);
        this.$router.replace("/home");
      } else {
        this.$message.error(meta.msg);
      }
      console.log(rst);
    },
  },
};
</script>

<style lang="less" scoped>
.app {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/images/login.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  .login {
    width: 600px;
    height: 250px;
    border-radius: 10px;
    display: flex;
    .left {
      width: 380px;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 10px 0 0 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding-left: 25px;
      p:nth-child(1) {
        font-size: 30px;
        color: #2088ff;
      }
    }
    .right {
      width: 220px;
      border-radius: 0 10px 10px 0;
      background-color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      em {
        font-size: 12px;
        color: #999;
      }
      a {
        font-size: 18px;
        color: #418fff;
      }
      div {
        width: 180px;
        display: flex;
        height: 50px;
        align-items: center;
      }
      div:nth-child(1) {
        justify-content: flex-end;
      }
      div:nth-child(2),
      div:nth-child(3) {
        background-color: #f2f2f2;
        border-radius: 50px;
        height: 40px;
        display: flex;
        // justify-content: center;
        align-items: center;
        input {
          border: none;
          background-color: #f2f2f2;
          //   background-color: red;
          outline: none;
          width: 120px;
          transform: translateX(24px);
        }

        span {
          i {
            font-size: 20px;
          }
          color: #c5ced3;
          display: flex;
          font-size: 20px;
          transform: translateX(20px);
        }
      }
      button {
        width: 100%;
        height: 100%;
        background-color: #409eff;
        border-radius: 50px;
        border: none;
        color: white;
        font-size: 20px;
      }
    }
  }
}
</style>